<template>
  <section>
    <el-card>
      <el-col class="toolbar">
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="search.code" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item>
            <!--<el-input v-model="search.orderTime1" placeholder="下单时间起"></el-input>-->
            <el-date-picker v-model="search.orderTime1" align="right" type="date" placeholder="下单开始时间" :picker-options="pickerOptionsStart"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <!--<el-input v-model="search.orderTime2" placeholder="下单时间至"></el-input>-->
            <el-date-picker v-model="search.orderTime2" align="right" type="date" placeholder="下单结束时间" :picker-options="pickerOptionsEnd"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-input v-model="search.name" placeholder="商户"></el-input>
          </el-form-item>
          <el-form-item>
            <!--<label>城市</label>-->
            <el-select v-model="search.cityCode" clearable placeholder="城市">
              <el-option-group v-for="group in cities" :label="group.text">
                <el-option v-for="item in group.children" :label="item.text" :value="item.value"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!--<label>状态</label>-->
            <el-select v-model="search.status" clearable placeholder="状态">
              <el-option v-for="item in types" :label="item.orderStatusText" :value="item.orderStatus"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!--<label>付款状态</label>-->
            <el-select v-model="search.payStatus" clearable placeholder="付款状态">
              <el-option v-for="item in payStatus" :label="item.payStatusText" :value="item.payStatusValue"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--列表-->
      <el-table :data="page.records" highlight-current-row stripe border v-loading="listLoading">
        <el-table-column prop="code" label="订单号"></el-table-column>
        <el-table-column prop="createdAt" label="下单时间"></el-table-column>
        <el-table-column prop="name" label="商户"></el-table-column>
        <el-table-column prop="cityName" label="城市"></el-table-column>
        <el-table-column prop="modeText" label="类型" width="80"></el-table-column>
        <el-table-column prop="statusText" label="状态" width="80"></el-table-column>
        <el-table-column prop="payStatusText" label="支付状态" width="80"></el-table-column>
        <el-table-column prop="amount" label="总金额" width="120"></el-table-column>
        <el-table-column inline-template label="操作" width="80">
          <span>
                <el-button class="el-icon-information"  size="small" @click="handleDetail(row)" title="查看订单详情">
                </el-button>
            </span>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-col :span="24" class="toolPage">
        <el-pagination :current-page="page.current" :page-sizes="[10, 20, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
          :total="page.total" style="float:right" @size-change="handleSizeChange" @current-change="handlePageChange">
          </el-pagination>
      </el-col>
    </el-card>
  </section>
</template>

<script>
  export default {
    beforeMount() {
      this.loadGridData()
      this.loadPayStatus()
      this.loadTypes()
      this.loadCities()
    },
    data() {
      let _this = this
      return {
        page: {
          total: 0,
          current: 1,
          size: 10,
          records: []
        },
        search: {
          code: '',
          orderTime1: '',
          orderTime2: '',
          name: '',
          cityCode: '',
          status: '',
          payStatus: ''
        },
        payStatus: [{
          payStatusValue: '',
          payStatusText: ''
        }],
        types: [{
          typeValue: '',
          typeCnValue: ''
        }],
        cities: [{
          text: '',
          value: ''
        }],
        listLoading: true,
        pickerOptionsStart: {

        },
        pickerOptionsEnd: {
          disabledDate(time) {
            return time.getTime() <= new Date(_this.search.orderTime1)
          }
        }
      }
    },
    methods: {
      handleSizeChange(size) {
        this.page.size = size,
          this.loadGridData()
      },
      handlePageChange(current) {
        this.page.current = current,
          this.loadGridData()
      },
      loadGridData() {
        this.listLoading = true
        let param = {
          pageSize: this.page.size,
          page: this.page.current,
          code: this.search.code,
          orderTime1: this.search.orderTime1,
          orderTime2: this.search.orderTime2,
          name: this.search.name,
          cityCode: this.search.cityCode,
          status: this.search.status,
          payStatus: this.search.payStatus
        }
        this.axios.get("/orders", { params: param }).then(response => {
          this.page = response.data,
            this.listLoading = false
        })
      },
      loadCities() {
        this.axios.get("/cities").then(response => { this.cities = response.data })
      },
      loadPayStatus() {
        this.axios.get("/orders/pay_status").then(response => { this.payStatus = response.data })
      },
      loadTypes() {
        this.axios.get("/orders/status").then(response => { this.types = response.data })
      },
      handleSearch() {
        this.loadGridData()
      },
      handleDetail(row) {
        this.$router.push(`/orders/${row.id}`)
      },
    }
  }

</script>